<template>
  <div>
    <p>请选择你要购买的书籍</p>
    <ul>
      <li v-for="(obj,index) in arr" :key="index">
        <span>{{obj.name}} </span>
        <button @click="addFn(index)">买书</button>
      </li>
    </ul>
    <table border="1" width="500" cellspacing="0">
      <tr v-for="(obj,index) in arr" :key="index">
        <th>{{index+1}}</th>
        <th>{{obj.name}}</th>
        <th>{{obj.price}}</th>
        <th>{{obj.count}}</th>
        <th>{{obj.price*obj.count}}</th>
      </tr>
    </table>
    <p>总价格为:{{zong}}</p>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        arr: [{
            name: "水浒传",
            price: 107,
            count: 0,
          },
          {
            name: "西游记",
            price: 192,
            count: 0,
          },
          {
            name: "三国演义",
            price: 219,
            count: 0,
          },
          {
            name: "红楼梦",
            price: 178,
            count: 0,
          },
        ],
      };
    },
    methods: {
      addFn(index) {
        this.arr[index].count++
      }
    },
    computed: {
      zong() {
        return this.arr.reduce((sum, val) => sum += val.price * val.count, 0)
      }

    }

  };
</script>